<template>
  <div class="timeline left container  container">
    <el-timeline>
      <el-timeline-item v-for="(l,index) in articlesList"
                        :key="index"
                        :color="index%2 === 0 ? 'blue' : index%2 === 1 ? 'green' : ''"
                        placement="top"
                        hide-timestamp>
        <el-card>
          <h3>{{l.projectTitle}}</h3>
          <p>{{l.projectDesc}}</p>
          <p>
            <span>
              {{ l.startTime | formateDate("YMD") }}--
              </span>
              <span>
                {{ l.endTime | formateDate("YMD") }}
             
              </span>
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <Loading v-if="isLoading"></Loading>
    <LoadEnd :msg="msg" v-if="isLoadEnd"></LoadEnd>
  </div>
</template>

<script>
import Loading from '../components/loading.vue'
import LoadEnd from '../components/loadEnd.vue'
import { getUserList } from '../api/api'
import {
  throttle,
  getScrollTop,
  getDocumentHeight,
  getWindowHeight,
  getQueryStringByName,
  timestampToTime
} from "../plugins/utils";
import axios from 'axios'
export default {
  data () {
    return {
      articlesList:[],
      tag_id:'',
      tag_name:'',
      pageNum:1,
      pageSize:50,
      isLoadEnd:false,
      isLoading:false,
      msg:''
    }
  },
  components:{
     Loading,
     LoadEnd,
     
  },

  mounted () {
      var that = this
      this.handleSearch();
   window.onscroll = () => {
      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 161) {
        // 如果不是已经没有数据了，都可以继续滚动加载
        if (this.isLoadEnd === false) {
          this.handleSearch();
        }
      }
    };
  },
  methods:{
    handleSearch(){
      var userId = this.getCookie('userID');
       this.isLoading = true;
        axios.post('api/exprience/',{pageNum:this.pageNum,pageSize:this.pageSize,userId:userId})
        .then(data => {
             if (data.data.length === 0 ) {
               this.msg='您还没有发表相关项！'
                this.isLoadEnd = true;
                this.isLoading = false;
                document.removeEventListener("scroll", () => {});
                window.onscroll = null;
                return;
              }else{
                    console.log(data)
                    this.isLoading=false
                    this.articlesList = [...this.articlesList, ...data.data];
                    this.pageNum++;
                  
              }
        
        })
    }
  // 
  }
}
</script>

<style lang='less' scoped>
@import url("../less/index.less");
.timeline {
  padding: 40px 0;
  .year {
    font-size: 34px;
    font-weight: bold;
    color: #000;
  }
  a {
    text-decoration: none;
  }

  .title {
    color: #333;
    &:hover {
      color: #1890ff;
    }
  }
}
</style>